<template>
    <div class="right-main">
        <div class="form-box">
            <Transition
                appear
                enter-active-class="animate__animated animate__bounceInRight"
                tag="div"
            >
                <div class="contenet">
                    <login-form />
                </div>
            </Transition>
        </div>
    </div>
</template>

<script>
import LoginForm from './loginForm.vue'
export default {
    components: {
        LoginForm
    },
    data() {
        return {
            theme: '',
            sunny: 'el-icon-sunny',
            moon: 'el-icon-moon'
        }
    }
}
</script>
<style lang="scss" scoped>
.right-main {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-end
    );

    overflow: hidden;
    .form-box {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: center,
            $align: center
        );
        .contenet {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: column,
                $justify: center,
                $align: center
            );
        }
    }
}
</style>
